<!DOCTYPE html>
<html> 
   <head>
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
        <base href="http://developer.here.com/apiexplorer/examples/api-for-js/getting-started/basic-map.html" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Nokia Maps API for JavaScript Example: Basic map</title>
        <meta name="description" content="How to create a basic map"/>
        <meta name="keywords" content="basic,Getting started"/>
        <!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
        <meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <!-- Styling for example container (NoteContainer & Logger)  -->
        <link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
        <!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
        <script type="text/javascript" charset="UTF-8" src="http://js.api.here.com/se/2.5.3/jsl.js?with=all"></script>
        <!-- JavaScript for example container (NoteContainer & Logger)  -->
        <script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
        <style type="text/css">
         html {
            overflow:hidden;
         }
         
         body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            position: absolute;
         }
         
         #mapContainer {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: absolute;
         }
      </style>
   </head>
   <body>
        <div id="mapContainer"></div>

        <div id="uiContainer">

      <input type='button' name='butt' id='render'/></div>
        <script type="text/javascript" id="exampleJsSource">

nokia.Settings.set("app_id", "aBtlH0zJEvQs6ixdaU7O"); 
nokia.Settings.set("app_code", "6CRSd_oPR5aXP_4il3KcPg");
// Use staging environment (remove the line for production environment)
    //nokia.Settings.set("serviceMode", "cit");

// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
   // initial center and zoom level of the map
   center: [52.11, 20.4],
   zoomLevel: 10,
     components: [new nokia.maps.map.component.Behavior(),
                     new nokia.maps.map.component.ZoomBar()]
                    // new nokia.maps.map.component.Overview(),
                    // new nokia.maps.map.component.TypeSelector(),
                     //new nokia.maps.map.component.ScaleBar()]
    
});
var mapObjectLogger = new Logger({
   id: "mapObjectLogger",
   parent: document.getElementById("uiContainer"),
   title: "Map object log"
});
map.removeComponent(map.getComponentById("zoom.DoubleClick"));
                          
if (nokia.maps.positioning.Manager) {
           var positioning = new nokia.maps.positioning.Manager();

           positioning.watchPosition(
              function (position) {
                 var coords = position.coords;
                 var marker =
                          new nokia.maps.map.StandardMarker(coords,{text: "Start"});
                 var accuracyCircle =
                    new nokia.maps.map.Circle(coords, coords.accuracy,{
         fillColor: "#F004", 
         width: 0,
         $id: "fence"
      });
                 map.objects.addAll([accuracyCircle, marker]);
                 map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
              },

              function (error) {
                 var errorMsg = "Location could not be determined: ";
        
                 if (error.code == 1)
                    errorMsg += "PERMISSION_DENIED";
                 else if (error.code == 2)
                    errorMsg += "POSITION_UNAVAILABLE";
                 else if (error.code == 3)
                    errorMsg += "TIMEOUT";
                 else errorMsg += "UNKNOWN_ERROR";
        
                 alert(errorMsg);
              }
           )
      
          /*     
if(nokia.maps.positioning.component.positioning)
  {
  var positioning=new nokia.maps.positioning.component.positioning();
  positioning.requestPosition(
      function(position){
        var coords = position.coords;
                 var marker =
                          new nokia.maps.map.StandardMarker(coords,{text: "req1",brush:{props:{color:"#1080DD",fill:"solid"}}});
                 var accuracyCircle =
                    new nokia.maps.map.Circle(coords, coords.accuracy);
                 map.objects.addAll([accuracyCircle, marker]);
                 map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
              },
              // Handle errors (display message):
              function (error) {
                 var errorMsg = "Location could not be determined: ";
        
                 // Determine what caused the error and show error message:
                 if (error.code == 1)
                    errorMsg += "PERMISSION_DENIED";
                 else if (error.code == 2)
                    errorMsg += "POSITION_UNAVAILABLE";
                 else if (error.code == 3)
                    errorMsg += "TIMEOUT";
                 else errorMsg += "UNKNOWN_ERROR";
        
                 alert(errorMsg);
              }
           )
    };
          */
    //   var mark= new nokia.maps.map.StandardMarker([52.51, 13.4],{text: "End",draggable: true});
       var mark= new nokia.maps.map.StandardMarker([13.1, 80.3],{text: "End",draggable: true,brush:{props:{color:"#1080DD",fill:"solid"}}});
      map.objects.add(mark);
/* We create a UI notecontainer for example description
 * NoteContainer is a UI helper function and not part of the Nokia Maps API
 * See exampleHelpers.js for implementation details 
 */
  /* var noteContainer = new NoteContainer({
   id: "basicMapUi",
   parent: document.getElementById("uiContainer"),
   title: "Basic map example",
   content:
      '<p>This example shows how to create a basic map with few lines of code</p>'
  });*/


var Geofence = function (fence, markers) {
   var i = markers.length;
   this.fence = fence;
   this.covers = {};
   
   /* For every given marker we add an observer on it's coordinate property
    * e.g if a marker's coordinate changes then GeoFence's observer function is called
    */
   while (i--) markers[i].addObserver("coordinate", this.observer, this);
};
Geofence.prototype.observer = function (obj, key, val) {
   // To see if object is within our fence we need to convert the objects geoCoordinate to screen map pixels
   var scrCoord = map.geoToPixel(val),
      fenceId = this.fence.$id,
      objId = obj.$id,
      objects = map.getObjectsAt(scrCoord.x, scrCoord.y),
      covers = false;
   
   /* Using getObjectsAt() we get all map objects at given map position in pixels
    * and then we see if the object is within our fence
    */
   for (var object in objects) {
      if (objects[object] === this.fence) {
         covers = true;
         break;
      }
   }
   
   if (covers !== this.covers[objId]) {
      if (this.covers[objId] !== undefined) {
         this.fence.set("fillColor", covers ? "#0F04" : "#F004");
         covers ? mapObjectLogger.log(objId + " has entered " + fenceId) : mapObjectLogger.log(objId + " has left " + fenceId);
      }
      this.covers[objId] = covers;
   } else if (covers) {
      // Observed object is within defined fence
      mapObjectLogger.log(objId + " is within " + fenceId);
   }
};

// We create GeoFence of the circle which will observe marker.
var fence = new Geofence(accuracyCircle, [mark]);
var render = document.getElementById("render");
  render.onclick=function(){
map.update(-1, true);
};
  };
      </script>
   </body>
</html>